var box=document.getElementsByClassName('box');
var son=document.getElementsByClassName('son');
var dotson=document.getElementsByClassName('dotson');
var left=document.getElementById('left');
var right=document.getElementById('right');
var menuList=document.getElementsByClassName('menuList');
var more=document.getElementsByClassName('more');

var a=0;
function run (){
	for (var i = 0; i<son.length; i++) {
		son[i].style.display='none';
		dotson[i].style.background= 'red';
	}
		son[a].style.display='block';
		 dotson[a].style.background='#fff';
	if (a==son.length-1) {
		a=0
	}else{
		a=a+1;
	}
}
run();

time=setInterval(run,500);
box[0].onmouseover=function(){
	clearInterval(time)
}
box[0].onmouseout=function(){
	time=setInterval(run,500)
}

for (var k=0; k<dotson.length; k++) {
		circle(k)
};
function circle(k){
	dotson[k].onclick=function (){
		a=k;
		run();
	}
}

left.onclick=function (){

	if (a==0) {
		a=dotson.length-2;
	}

	else if (a==1) {
		a=dotson.length-1;
	}
	else{
		a-=2;
	}
	run()
}
right.onclick=function (){
	run()
}

for (var j = 0; j <menuList.length; j++) {
	
	menuover(j);
	menuout(j);
};
function menuover(j){
	menuList[j].onmouseover=function(){ more[j].style.display='block';}

}
function menuout(j){
	menuList[j].onmouseout=function(){more[j].style.display='none';}
}

